<template>
  <div class="app-container">
    <div v-show="active === 1">
      <!-- 查询条件 -->
      <el-form ref="searchForm" :inline="true" :model="search" size="mini">
        <el-form-item prop="positionName" label="职务名称">
          <el-input v-model="search.positionName" placeholder="职务名称" class="search-input" clearable/>
        </el-form-item>
        <el-form-item label="是否有效" prop="isValid">
          <isValid v-model="search.isValid" />
        </el-form-item>
        <el-form-item label="数据来源" prop="dataSources">
          <dataSource v-model="search.dataSources" />
        </el-form-item>
        <br>
        <div style="text-align:right">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置
            </el-button>
          </el-form-item>
        </div>

      </el-form>
      <!-- 用户列表 -->
      <BaseTable ref="table" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle">
        <el-table-column align="center" label="操作" min-width="50">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="POSITION_CODE" label="职务代码" min-width="50"/>
        <el-table-column prop="POSITION_NAME" label="职务名称" min-width="50"/>
        <el-table-column prop="POSITION_DESC" label="职务描述" min-width="50"/>
        <el-table-column prop="data_source" label="数据来源" min-width="50"/>
        <el-table-column prop="isNot" label="是否有效" min-width="50"/>
      </BaseTable>
    </div>
    <!-- 编辑div -->
    <div v-show="active === 2">
      <el-form ref="editSearchForm" :inline="true" :model="editSearch" :rules="rules" size="mini">
        <el-form-item prop="positionCode" label="职务代码">
          <el-input v-model="editSearch.positionCode" disabled placeholder="职务代码" class="search-input" />
        </el-form-item>
        <el-form-item prop="positionName" label="职务名称">
          <el-input v-model="editSearch.positionName" placeholder="职务名称" class="search-input" clearable/>
        </el-form-item>
        <el-form-item prop="positionDesc" label="职务描述">
          <el-input v-model="editSearch.positionDesc" placeholder="职务描述" class="search-input" clearable/>
        </el-form-item>
        <br>
        <el-form-item label="是否有效" prop="isValid">
          <isValid v-model="editSearch.isValid" />
        </el-form-item>
        <el-form-item label="数据来源" prop="dataSources">
          <dataSource v-model="editSearch.dataSources" disabled />
        </el-form-item>
        <div style="text-align:center">
          <el-button type="primary" @click="editSave">保存</el-button>
          <el-button @click="active = 1">返回</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  getPositionDefineList,
  editSavePositionDefine
} from '@/api/admin/org/gms/positionDefine'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'
import isValid from '@/components/Select/isValid'
import dataSource from '@/components/Select/dataSource'
import _ from 'lodash'

export default {
  name: 'PositionDefine',
  components: {
    BaseTable,
    isValid,
    dataSource
  },
  mixins: [formMixins],
  data() {
    return {
      active: 1,
      search: {
        limit: 10,
        pageNum: 1,
        positionName: '',
        isValid: '',
        dataSources: ''
      },
      editSearch: {
        positionCode: '',
        positionType: '',
        positionId: '',
        positionName: '',
        positionDesc: '',
        isValid: '',
        dataSource: ''
      },
      rules: {
        positionDesc: [{
          required: true,
          message: '请输入职位描述'
        }],
        positionName: [{
          required: true,
          message: '请输入职位名称'
        }]
      }

    }
  },
  mounted() {
    this.searchHandle()
  },
  methods: {
    // 查询
    searchHandle() {
      const table = this.$refs['table']
      const search = _.extend(this.search)
      getPositionDefineList(search).then(res => {
        table.complete().filData(res)
      }).catch(err => {
        table.complete()
      })
    },
    // 编辑
    edit(data) {
      this.active = 2
      const positionId = data.POSITION_ID
      const positionCode = data.POSITION_CODE
      const positionName = data.POSITION_NAME
      const positionDesc = data.POSITION_DESC
      const isValid = data.isNot
      const dataSource = data.data_source
      debugger
      this.editSearch.positionType = data.POSITION_TYPE
      this.editSearch.positionCode = positionCode
      this.editSearch.positionId = positionId
      this.editSearch.positionName = positionName
      this.editSearch.positionDesc = positionDesc
      this.editSearch.isValid = isValid
      this.editSearch.dataSources = dataSource
    },
    // 保存
    editSave() {
      this.$refs['editSearchForm'].validate((valid) => {
        if (valid) {
          debugger
          const positionId = this.editSearch.positionId
          if (this.editSearch.isValid === '否') {
            this.editSearch.isValid = '10041002'
          } else {
            this.editSearch.isValid = '10041001'
          }
          if (this.editSearch.dataSources === '集团') {
            this.editSearch.dataSources = '10451003'
          } else {
            this.editSearch.dataSources = '10451001'
          }
          const data = {
            positionType: this.editSearch.positionType,
            positionDesc: this.editSearch.positionDesc,
            isValid: this.editSearch.isValid,
            dataSources: this.editSearch.dataSources,
            positionCode: this.editSearch.positionCode,
            positionName: this.editSearch.positionName
          }
          editSavePositionDefine(positionId, data).then(res => {
            this.$message({
              type: 'success',
              message: '保存成功!'
            })
            this.active = 1
            this.searchHandle()
          }).catch(err => {
            this.$message({
              type: 'error',
              message: '保存出错，请联系管理员!'
            })
            return false
          })
        } else {
          this.$message({
            type: 'info',
            message: '请填写必填项!'
          })
          return false
        }
      })
    }
  }
}

</script>

<style scoped>

</style>
